<template>
	<view  class="content">
		<uni-list-item>
			<template v-slot:header>
				<view class="flexrowcenter" style="width: 100px;">
					<image class="red-marker" src="@/static/images/common/red-mark.png" />
					<text class="text-df  font-bold " style="width:80px;margin-left: 10px;">手机号</text>
				</view>
			</template>
			<template v-slot:body>
				<view class="flexrow">
					<view class="uni-input-wrapper">
						<uni-easyinput type="number" :inputBorder="false" style="min-width:180px;" v-model="mobile" placeholder="请输入手机号" />
					</view>
				</view>
			</template>
		</uni-list-item>
		<uni-list-item>
			<template v-slot:header>
				<view class="flexrowcenter" style="width: 100px;">
					<image class="red-marker" src="@/static/images/common/red-mark.png" />
					<text class="text-df  font-bold " style="width:80px;margin-left: 10px;">验证码</text>

				</view>
			</template>
			<template v-slot:body >
					<view class="uni-input-wrapper flexrowcenter"  style="width:100px">
						<uni-easyinput type="number"  v-model="messagecode" placeholder="请输入验证码" />
					</view>
			</template>
      <template v-slot:footer>
        <view  class="flexrowcenter margin-left-xl">
          <button :class="['padding-tb-sm',choose == false ? 'hasChosen':'notChosen']"
                  @tap.stop="sendMsg"
                  :disabled="choose">
            {{ choose ? clock + 's重新获取' : '获取验证码' }}
          </button>
        </view>
      </template>
		</uni-list-item>
    <view class="button-container">
			<button type="primary" class="button"
              :disabled="disabledButton"
              @click="changemobile">修改</button>

		</view>

	</view>
</template>
<script>
import {reg} from  '@/utils/common'
import { sendSmsCode,updatePhone } from "@/api/system/user"
  export default {
    data() {
			return {
				messagecode: null,
				mobile: null,
        clock: 60 ,// 倒计时
        choose:false,
			}
		},
    computed: {
      id() {
        return this.$store.state.user.id
      },
      disabledButton(){
        if(!this.messagecode){
          return true
        }else if(!this.mobile){
          return true
        }else{
          return false
        }
      }
    },
		methods: {
      setTime(){// 倒计时函数
        if(this.clock == 0){
          this.clock = 60
          this.choose = false
          return
        }else{
          this.clock--
          if(this.clock < 10){this.clock = '0'+this.clock}
        }
        setTimeout(() => { this.setTime() },1000)
      },
      sendMsg(){
        if(reg(this.mobile) ) {
          this.choose = true
          this.setTime()
          sendSmsCode({
            mobile: this.mobile,
            scene: 24  //    UPDATE_PHONE(24, "update_phone", "手机端 - 修改手机号"),
          }).then(res => {
            uni.showToast({
              title: '发送成功'
            })
          })
        }
      },
			changemobile() {
        console.log('userid>>>',this.id)
        uni.showLoading({
          title:'请求中..'
        })
        updatePhone({
          mobile:  this.mobile,
          code:   this.messagecode,
          id:this.id
        }).then(res=>{
          uni.hideLoading()
          uni.showToast({title:'修改成功'})
        }).catch(()=>{
          uni.hideLoading()
        })
			},
      codeChange(text){
        console.log('codeChange>>',text)
      }
		}
	}
</script>

<style scoped  lang="scss">

.hasChosen{
  margin-left: 10px;
  background-color: #007aff;
  color: white;

  line-height: 14px;
  text-align: center;
  font-size: 12px;
}
.notChosen{
  background-color: #aeaeae;
  @extend .hasChosen;
}



.button-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20rpx;
		margin-bottom: 120rpx;
		height: 50px;
	}

	.button {
		flex: 1;
		margin-right: 10px;
		margin-left: 10px;

		height: 100%;
		text-align: center;
		line-height: 50px;
		font-size: 16px;
		border-radius: 5px;

		color: #fff;


	}
</style>